﻿<template>
    <ElInput v-model="newText"
             type="textarea"
             :readonly="disabled"
             @blur="doSave"
             :autofocus="true"
             :autosize="{ minRows: 2, maxRows: 6 }"
             :maxlength="maxlength"
             show-word-limit
             style="width:100%"
             placeholder="请输入内容"></ElInput>
</template>


<script>
    import { ElInput } from 'element-plus'
    export default {
        name: 'TextContent',
        components: {
            ElInput
        },
        emits: ['update:modelValue'],
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            modelValue: {
                type: String
            },
            textClass: {
                type: String,
                default: "textContent"
            },
            maxlength: {
                type: Number,
                default:500
            }
        },
        data() {
            return {
                newText: "",
            }
        },
        created(){
            this.newText = this.modelValue;
        },
        methods: {
            doSave() {
                if (this.disabled) return
                this.$emit("update:modelValue", this.newText);
            },
        },
        watch: {
            modelValue(val) {
                this.newText = val;
            },
        }
    }

</script>

<style>
    .textContent {
        white-space: pre-wrap;
        line-height: 26px;
        text-decoration-line: underline;
        text-decoration-color: #cecece;
    }
</style>